/* stylelint-disable docusaurus/copyright-header */
/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #03a9f4;
  --ifm-color-primary-dark: rgb(33, 175, 144);
  --ifm-color-primary-darker: rgb(31, 165, 136);
  --ifm-color-primary-darkest: rgb(26, 136, 112);
  --ifm-color-primary-light: rgb(70, 203, 174);
  --ifm-color-primary-lighter: rgb(102, 212, 189);
  --ifm-color-primary-lightest: rgb(146, 224, 208);
  --ifm-code-font-size: 95%;
}

.docusaurus-highlight-code-line {
  background-color: rgb(216, 220, 232);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

[data-theme='dark'] .docusaurus-highlight-code-line {
  background-color: rgb(46, 47, 75);
}

code {
  background-color: rgba(255, 229, 100, 0.2);
  color: #1a1a1a;
  padding: 5px 8px;
}

.admonition-important code {
  background-color: #fffae0;
  color: #1a1a1a;
  padding: 2px 4px;
  font-size: 14px;
  text-decoration: none;
  border-radius: 5px;
}

.admonition-important a:hover {
  color: #1a1a1a;
}

[data-theme='dark'] .admonition-important a:hover {
  color: var(--ifm-color-content-secondary);
}

header.hero {
  transition: background-color 0.2s ease-in-out;
  background-color: #e4f4ff;
  color: black;
  padding: 2rem 0;
}

header.hero .hero__subtitle {
  font-size: 26px;
  margin-bottom: 32px;
}

.getting-started {
  background-color: transparent;
  border-color: #2ebbe4;
  color: #2ebbe4 !important;
}
.getting-started:hover {
  background-color: rgba(46, 187, 228, 0.8);
  color: white !important;
}

[data-theme='dark'] .getting-started:hover {
  background-color: #2ebbe4;
}

[data-theme='dark'] .getting-started {
  background-color: transparent;
}

[data-theme='dark'] header.hero {
  background-color: #303846;
  color: white;
}

[data-theme='dark'] code {
  background-color: rgba(115, 124, 153, 0.2);
  color: #e6e6e6;
}

[data-theme='dark'] .admonition-content code {
  color: inherit;
}

[data-theme='dark'] .main-wrapper {
  background-color: #282c35;
}

.description {
  padding-top: 30px;
  font-size: 18px;
}

.hero .hero__title {
  font-size: 58px;
}

.hero .hero__subtitle {
  font-size: 30px;
}

.container img {
  width: 100px !important;
  margin-bottom: 27px !important;
  height: auto !important;
}

.container img.gif {
  width: 700px !important;
  margin-bottom: 27px !important;
  height: auto !important;
}

img.main-logo {
  width: 300px !important;
}

header iframe {
  border: none;
  height: 30px;
  margin-left: 20px;
  width: 150px;
}

.video-container.main {
  transition: background-color 0.2s ease-in-out;
  background-color: #e4f4ff;
}

[data-theme='dark'] .video-container.main {
  background-color: #404c5c;
}

.video-container {
  padding: 56px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.video-container .actions {
  display: flex;
  margin-top: 2.5rem;
}

.video-container iframe {
  width: 560px;
  height: 315px;
}
.video-container .feature-container {
  width: 485px;
  height: 100%;
  margin-right: 30px;
}
.video-container .title {
  display: flex;
  justify-content: flex-start;
}
.video-container .title img {
  width: 50px;
  margin-right: 10px;
}

.video-container .title h2 {
  margin: 0;
  align-self: center;
}

.youtube {
  background-color: #2ebbe4;
  border-color: #51d1f6;
  color: white !important;
}
.youtube:hover {
  background-color: rgba(46, 187, 228, 0.8);
}

[data-theme='dark'] .youtube:hover {
  background-color: #2ebbe4;
  color: white !important;
}

[data-theme='dark'] .youtube {
  background-color: rgba(46, 187, 228, 0.8);
}

.header-github-link {
  padding-left: 0;
}

.header-icon-link span {
  display: none;
}

.header-icon-link:before {
  content: '';
  width: 24px;
  height: 24px;
  display: flex;
}

.header-github-link:before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

.header-gitter-link:before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 18 25' class='logo-gitter-sign' data-v-44ebcb1a=''%3E%3Crect x='15' y='5' width='2' height='10'%3E%3C/rect%3E%3Crect x='10' y='5' width='2' height='20'%3E%3C/rect%3E%3Crect x='5' y='5' width='2' height='20'%3E%3C/rect%3E%3Crect width='2' height='15'%3E%3C/rect%3E%3C/svg%3E")
    no-repeat;
}

.header-playground-link {
  display: flex;
}

[data-theme='dark'] .header-playground-link:after {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='10' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29.9984 2.92009C29.9543 1.81641 29.0238 0.957482 27.9201 1.00163L9.93446 1.72105C8.83077 1.7652 7.97185 2.6957 8.01599 3.79939C8.06014 4.90308 8.99064 5.76201 10.0943 5.71786L18.047 5.37359L20.1625 7.57369L2.5304 27.6435C1.7812 28.4551 1.83181 29.7204 2.64345 30.4696C3.45509 31.2188 4.72041 31.1682 5.46962 30.3566L23.3959 10.9365L26.4426 14.1051L26.721 21.0656C26.7652 22.1693 27.6957 23.0282 28.7994 22.9841C29.9031 22.9399 30.762 22.0094 30.7178 20.9057L29.9984 2.92009Z' fill='white'/%3E%3C/svg%3E")
    no-repeat center;
}

[data-theme='dark'] .header-gitter-link:before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.1' fill='white' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 18 25' class='logo-gitter-sign' data-v-44ebcb1a=''%3E%3Crect x='15' y='5' width='2' height='10'%3E%3C/rect%3E%3Crect x='10' y='5' width='2' height='20'%3E%3C/rect%3E%3Crect x='5' y='5' width='2' height='20'%3E%3C/rect%3E%3Crect width='2' height='15'%3E%3C/rect%3E%3C/svg%3E")
    no-repeat;
}
[data-theme='dark'] .header-github-link:before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

.first-nav-element {
  border-left: 1px solid #d9d8d8ff;
}

.video-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 65vh;
}

.video-preview .text {
  font-size: 22px;
}

.thumbnail-container {
  display: flex;
  max-width: 60%;
  height: 98px;
  min-height: 98px;
  overflow-x: auto;
}

.video-thumbnail {
  opacity: 0.5;
  transition: all 0.2s ease-in-out;
  min-width: 168px;
  max-width: 168px;
  height: 98px;
  margin-right: 2px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border: 4px solid transparent;
  cursor: pointer;
}

.video-thumbnail:hover {
  opacity: 1;
}

.video-thumbnail.selected {
  opacity: 1;
  border-color: dodgerblue;
}

[data-theme='dark'] .blog-post {
  border-color: rgb(102, 102, 104);
  box-shadow: rgba(255, 255, 255, 0.11) 0 3px 8px 0;
}
.blog-post {
  transition: border 0.2s ease-in-out;
  display: flex;
  border-radius: 5px;
  text-decoration: none;
  page-break-inside: avoid;
  color: inherit;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(230, 236, 241);
  box-shadow: rgba(116, 129, 141, 0.1) 0 3px 8px 0;
  margin: 30px 0;
}

.blog-post:hover {
  color: inherit;
  text-decoration: none;
  border-color: var(--ifm-link-color);
}

.blog-post.plugin .blog-title {
  font-size: 24px;
  text-align: center;
}
.blog-post.plugin .blog-description {
  text-align: center;
}

.blog-post .blog-preview {
  flex: 1;
  overflow: hidden;
  padding: 24px;
  min-height: 160px;
}
.blog-post .blog-title {
  font-size: 16px;
  font-weight: 500;
}
.blog-post .blog-description {
  opacity: 0.5;
  margin: 8px 0;
  max-height: 50px;
}
.blog-post .blog-source {
  font-size: 12px;
  font-weight: 400;
}

.blog-post .blog-image {
  width: 160px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  flex: 0 0 auto;
  border-radius: 5px;
}
